<!-- 活动详情 -->
<template>
	<view>
		<scroll-view class="page" scroll-y="true">
			<image :src="detail.activityImage" class="topimg" height="390"></image>
			<view class="instructions">
				<view class="text1 flex justify-between align-center">
					<view v-if="detail.activityPrice == 0" class="unprice">
						免费
					</view>
					<view v-if="detail.activityPrice != 0" class="price">
						<text class="icon">¥</text>
						<text class="money">
							{{detail.activityPrice}}
						</text>
					</view>
					<view class="num">
						<text class="area">报名人数</text>
						<text class="onnum">
							{{detail.activltyApply}}
						</text>
						<text class="allnum">
							/{{detail.activltyOnline}}
						</text>
					</view>
				</view>
				<view class="text2">
					{{detail.activityName}}
				</view>
				<view class="text3">
					{{detail.activityExplanation}}
				</view>
				<view class="text4 flex">
					<view class="icon">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/square/city.png" mode="heightFix">
						</image>
					</view>
					<text class="name">
						{{detail.activityAddress}}
					</text>
				</view>
				<view class="text5 flex">
					<view class="icon">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/square/date.png" mode=""></image>
					</view>
					<text class="name">
						{{getTimer(detail.startDate)}} - {{getTimer(detail.endDate)}}
					</text>
				</view>
				<view class="text6 flex">
					<view class="label flex justify-center align-center"
						v-for="(item,index) in detail.activityTitleList" :key="index">
						<text>{{item}}</text>
					</view>
				</view>
			</view>
			<view style="height: 20rpx; width: 100%; background: #F7F7F7;">

			</view>
			<view class="detail  justify-center align-center">
				<view class="title">
					活动详情
				</view>
				<view class="imgs">
					<image v-for="it in detail.activityDetailList" :src="it" mode=""></image>
				</view>
			</view>

		</scroll-view>
		<view class="function flex justify-between align-center">
			<view class="collection flex justify-between">
				<view class="item flex justify-center align-center flex-column" @click="shoucang(detail.activityId)">
					<view class="icon">
						<image v-if="!detail.collectType"
							src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/shoucang.png" mode=""></image>
						<image v-if="detail.collectType"
							src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/shoucang-active.png" mode="">
						</image>
					</view>
					<view class="text">
						收藏
					</view>
				</view>
				<view style="width: 45rpx;">

				</view>
				<view class="item flex justify-center align-center flex-column">
					<button open-type="share" class="texts">
						<view class="icon">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/fenxiang.png" mode="">
							</image>
						</view>
						分享
					</button>
				</view>
			</view>
			<view v-if="!detail.type" class="button flex justify-center align-center" @click="check(detail.activityId)">
				立即报名
			</view>
			<view v-if="detail.type" class="button0 flex justify-center align-center">
				已报名
			</view>
		</view>
		<u-mask :show="show" @click="show = false">
			<view class="form" v-show="show">
				<u-form class="contents" :model="checkQurey" ref="uForm">
					<view class="txt">请填写报名信息</view>
					<u-form-item label="姓名" label-width="144" prop="applyName">
						<u-input :clearable="false" v-model="checkQurey.applyName" placeholder="请输入您的姓名" />
					</u-form-item>
					<u-form-item label="手机号" label-width="144" prop="applyPhone">
						<u-input :clearable="false" v-model="checkQurey.applyPhone" placeholder="请输入您的手机号码" />
					</u-form-item>
					<u-form-item label="性别" label-width="144" prop="applySex">
						<view v-if="checkQurey.applySex.length != 0" @click.stop="visible = true">
							{{checkQurey.applySex}}
						</view>
						<view v-if="checkQurey.applySex.length == 0" @click.stop="visible = true" style="color: #C0C4CC">
							请选择性别
						</view>
						<!-- <u-input v-model="value"  type="select" disabled :selectOpen="visible"  @click.top="visible = true" /> -->
					</u-form-item>
					<view class="btn">
						<view class="btn0 flex justify-center align-center" @click="visible=false" type="error">取消</view>
						<view class="btn1 flex justify-center align-center" @click="submit" type="primary">提交</view>
					</view>
				</u-form>
			</view>
		</u-mask>
		<u-select confirm-color="#0265EB" v-model="visible" :list="list" @confirm="confirm" @cancel="visible=false">
		</u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {},
				listQurey: {
					activityId: Number
				},
				checkQurey: {
					activityId: Number,
					applyName: '',
					applyPhone: '',
					applySex: ''
				},
				shoucangQurey: {
					activityId: Number
				},
				show: false,
				list: [{
						value: 0,
						label: '女'
					},
					{
						value: 1,
						label: '男'
					}
				],
				granted: '',
				visible: false,
				rules: {
					applyName: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur']
					}],
					applyPhone: [{
						required: true,
						message: '请输入手机号码',
						trigger: ['change', 'blur']
					}],
					applySex: [{
						required: true,
						message: '请选择性别',
						trigger: ['change', 'blur']
					}],
				},
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.getList()
		},
		methods: {
			async getList() {
				this.listQurey.activityId = uni.getStorageSync('pageNum')
				let {
					data: detail
				} = await this.$get('/activity/detail', this.listQurey)
				console.log(detail)
				this.detail = detail
			},
			confirm(e) {
				console.log(e[0].label)
				this.checkQurey.applySex = e[0].label
			},
			getTimer(timer) {

				let oldtime = new Date(timer); //目标时间
				let t_day = oldtime.getDate();
				let t_year = oldtime.getFullYear();
				let t_month = oldtime.getMonth() + 1;
				let t_hour = oldtime.getHours();
				let t_minute = oldtime.getMinutes();
				if (t_hour < 10) {
					t_hour = '0' + t_hour
				}
				if (t_minute < 10) {
					t_minute = '0' + t_minute
				}
				return t_year + '年' + t_month + '月' + t_day + '日' + t_hour + ':' + t_minute

			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$post('/activity/applyActivity', this.checkQurey).then((res)=>{
							if(res.code == 200){
								this.getList()
								uni.setStorageSync('activity',this.checkQurey.activityId)
							}
						})
					} else {
						return true
					}

				})
			},
			//报名
			check(id) {
				if (uni.getStorageSync('openId')) {
					if (this.detail.activltyApply != this.detail.activltyOnline) {
						this.checkQurey.activityId = id
						this.show = true
					} else {
						uni.showToast({
							title: '报名人数已满',
							icon: 'none'
						})
					}
				} else {
					uni.navigateTo({
						url: '../../pages/login/login'
					})
				}


			},
			//刷新
			fresh() {
				if (getCurrentPages().length != 0) {
					getCurrentPages()[getCurrentPages().length - 1].onLoad()
				}
			},
			//分享
			share() {

			},
			//收藏
			shoucang(id) {
				if (uni.getStorageSync('openId')) {
					this.shoucangQurey.activityId = id
					this.$post('/activity/activityCollection', this.shoucangQurey)
					this.fresh()
				} else {
					uni.navigateTo({
						url: '../../pages/login/login'
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.page {
		height: 1270rpx;

		.topimg {
			height: 390rpx;
			width: 100%;
		}

		.instructions {
			padding: 30rpx;

			.text1 {
				.unprice {
					font-weight: bold;
					color: #0265EB;
					font-size: 36rpx;
				}

				.price {
					color: #0265EB;

					.icon {
						font-size: 24rpx;
					}

					.money {
						font-size: 40rpx;
						font-weight: bold;
					}
				}

				.num {
					.area {
						margin-right: 20rpx;
					}

					.onnum {
						color: #0265EB;
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			}

			.text2 {
				color: #333333;
				font-size: 36rpx;
				font-weight: bold;
				margin: 30rpx 0 20rpx;
			}

			.text3 {
				color: #999999;
				font-size: 24rpx;
				line-height: 1.5;
			}

			.text4 {
				margin: 30rpx 0 20rpx;

				.icon {
					width: 20rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}

				.name {
					color: #666666;
					font-size: 24rpx;
				}
			}

			.text5 {
				margin-bottom: 30rpx;

				.icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}

				.name {
					color: #666666;
					font-size: 24rpx;
				}
			}

			.text6 {
				.label {
					border: 1px solid #0265EB;
					opacity: 0.5;
					border-radius: 4px;
					height: 41rpx;
					margin-right: 20rpx;
					padding: 0 12rpx;

					text {
						color: #0265EB;
						font-size: 24rpx;
					}
				}
			}
		}

		.detail {
			padding: 30rpx;
			position: relative;

			.title {
				font-weight: bold;
				color: #333333;
				font-size: 32rpx;
				margin-bottom: 50rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}

			.imgs {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				margin-top: 80rpx;
				width: 800rpx;
				height: 700rpx;
				padding: 20rpx;
			}
		}

		.function {
			width: 100%;
			position: fixed;
			bottom: env(safe-area-inset-bottom);
			padding: 0 30rpx;
			background-color: #FFFFFF;
			height: 90rpx;

			.collection {
				padding: 0 30rpx;

				.item {

					.icon {
						width: 38rpx;
						height: 38rpx;
					}

					.text {
						font-size: 22rpx;
						color: #191919;
						margin-top: 7rpx;
					}

					.texts {
						.icon {
							width: 38rpx;
							height: 38rpx;
						}

						font-size: 22rpx;
						color: #191919;
						margin-top: 7rpx;
					}
				}
			}

			.button {
				width: 496rpx;
				height: 74rpx;
				background: linear-gradient(135deg, #1C79F8, #0265EB);
				border-radius: 37px;
				color: #FFFFFF;
				box-shadow: 0px 2px 3px rgba(12, 108, 240, .4);
			}

			// .buttons{
			// 	width: 496rpx;
			// 	height: 74rpx;
			// 	background: linear-gradient(135deg, #1C79F8, #0265EB);
			// 	border-radius: 37px;
			// 	color: #FFFFFF;
			// 	box-shadow: 0px 2px 3px rgba(12,108,240,.4);
			// }
		}
	}

	.function {
		width: 100%;
		position: fixed;
		bottom: env(safe-area-inset-bottom);
		padding: 0 30rpx;
		background-color: #FFFFFF;
		height: 90rpx;

		.collection {
			padding: 0 30rpx;

			.item {

				.icon {
					width: 38rpx;
					height: 38rpx;
				}

				.text {
					font-size: 22rpx;
					color: #191919;
				}

				.texts {
					font-size: 20rpx;
					color: #191919;
					background-color: #FFFFFF;
					padding: 0;
					border: none;
				}
			}
		}

		.button {
			width: 496rpx;
			height: 74rpx;
			background: linear-gradient(135deg, #1C79F8, #0265EB);
			border-radius: 37px;
			color: #FFFFFF;
			box-shadow: 0px 2px 3px rgba(12, 108, 240, .4);
		}

		.button0 {
			width: 496rpx;
			height: 74rpx;
			background: #999999;
			border-radius: 37px;
			color: #FFFFFF;
			box-shadow: 0px 2px 3px rgba(153, 153, 153, 0.4);
		}


		// .buttons{
		// 	width: 496rpx;
		// 	height: 74rpx;
		// 	background: linear-gradient(135deg, #1C79F8, #0265EB);
		// 	border-radius: 37px;
		// 	color: #FFFFFF;
		// 	box-shadow: 0px 2px 3px rgba(12,108,240,.4);
		// }
	}

	.form {

		.txt {
			display: flex;
			justify-content: center;
			padding-bottom: 30rpx;
			color: #625D5D;
		}

		width: 690rpx;
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 30rpx;
		border-radius: 24rpx;
		position: fixed;
		top:50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #ffffff;
		z-index: 99;

		.contents {
			.btn {
				padding-top: 20rpx;
				display: flex;
				justify-content: center;

				.btn0 {
					width: 300rpx;
					height: 75rpx;
					background: #999999;
					border-radius: 38rpx;
					line-height: 1;
					font-weight: 500;
					color: #FFFFFF;
					font-size: 32rpx;
					box-shadow: 0rpx 10rpx 10rpx rgba(153, 153, 153, 0.4);
					margin-right: 40rpx;
				}

				.btn1 {
					width: 300rpx;
					height: 75rpx;
					background: #0265EB;
					border-radius: 38rpx;
					line-height: 1;
					font-weight: 500;
					color: #FFFFFF;
					font-size: 32rpx;
					box-shadow: 0rpx 10rpx 10rpx rgba(12, 108, 240, .4);
				}
			}
		}


	}
</style>
